@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    .content-auto {
        content-visibility: auto;
    }
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }
    .tab-active {
        @apply text-primary border-b-2 border-primary;
    }
    .nav-active {
        @apply text-primary;
    }
    .btn-primary {
        @apply bg-primary text-white px-4 py-2 rounded-lg font-medium transition-all duration-300 hover:bg-primary/90 hover:shadow-lg transform hover:-translate-y-0.5;
    }
    .btn-secondary {
        @apply bg-white text-primary border border-primary px-4 py-2 rounded-lg font-medium transition-all duration-300 hover:bg-primary/5;
    }
    .btn-danger {
        @apply bg-red-500 text-white px-4 py-2 rounded-lg font-medium transition-all duration-300 hover:bg-red-600 hover:shadow-lg transform hover:-translate-y-0.5;
    }
    .card-hover {
        @apply transition-all duration-300 hover:shadow-card hover:-translate-y-1;
    }
    .animate-fade-in {
        animation: fadeIn 0.5s ease-in-out;
    }
    .animate-slide-up {
        animation: slideUp 0.4s ease-out;
    }
    .animate-pulse-slow {
        animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    @keyframes slideUp {
        from { transform: translateY(20px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }
}